<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>浏览可选课程 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* 通用容器样式，为了与主内容区对齐 */
        .container {
            width: 90%; /* 调整容器宽度 */
            max-width: 1200px; /* 最大宽度 */
            margin: 20px auto; /* 居中并上下留白 */
            padding: 0 15px; /* 左右内边距 */
        }

        /* 页面标题样式 */
        .page-header {
            text-align: center; /* 标题居中 */
            margin-bottom: 40px; /* 底部留白 */
            padding: 20px 0; /* 上下内边距 */
            border-bottom: 2px solid #007bff; /* 底部蓝色线条 */
        }

        .page-title {
            font-size: 2.8em; /* 更大的字体 */
            color: #2c3e50; /* 深色字体 */
            font-weight: bold;
            letter-spacing: 1px; /* 字符间距 */
            margin: 0; /* 移除默认外边距 */
        }

        /* 课程网格布局 */
        .course-grid {
            display: grid;
            /* 响应式列布局：
               - repeat(auto-fit, ...) 自动适应列数
               - minmax(280px, 1fr) 每列最小280px，最大占据可用空间均分
               这会使得在不同屏幕尺寸下自动调整列数，并保持卡片宽度灵活。
            */
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px; /* 增加卡片之间的间距 */
            margin-top: 0; /* 标题已经有了足够的间距，这里不需要额外上边距 */
            justify-content: center; /* 在容器宽度允许时，卡片居中排列 */
        }

        /* 课程卡片样式 */
        .course-card {
            border: 1px solid #e0e0e0; /* 浅色边框 */
            border-radius: 10px; /* 更圆润的边角 */
            background-color: #fff;
            box-shadow: 0 6px 15px rgba(0,0,0,0.1); /* 更明显的阴影效果 */
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 隐藏溢出内容，特别是图片 */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
        }

        .course-card:hover {
            transform: translateY(-8px); /* 鼠标悬停时上浮效果 */
            box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* 悬停时阴影更深 */
        }

        .course-card .course-image {
            width: 100%;
            height: 180px; /* 固定图片高度，保持卡片整齐 */
            object-fit: cover; /* 确保图片覆盖整个区域，可能裁剪 */
            border-radius: 10px 10px 0 0; /* 顶部圆角，底部直角 */
            margin-bottom: 15px; /* 图片下方留白 */
            border-bottom: 1px solid #eee; /* 图片底部细线 */
        }

        .course-card-content {
            padding: 15px;
            flex-grow: 1; /* 让内容区域占据剩余空间 */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* 使内容垂直分布 */
        }

        .course-card h3 {
            margin-top: 0;
            color: #333;
            font-size: 1.4em; /* 课程名称字体更大 */
            margin-bottom: 10px;
            min-height: 2.8em; /* 确保标题有最小高度，避免内容过少时卡片高度不一致 */
            line-height: 1.4;
        }

        .course-card p {
            color: #666;
            font-size: 0.95em; /* 调整字体大小 */
            margin-bottom: 8px; /* 调整段落间距 */
            line-height: 1.5;
        }

        .instructor-info, .chapter-count {
            font-size: 0.88em; /* 讲师和章节数信息字体略小 */
            color: #555;
            margin-bottom: 5px;
        }

        .course-card .price {
            font-weight: bold;
            color: #e67e22; /* 价格颜色更醒目 */
            font-size: 1.2em; /* 价格字体更大 */
            margin-top: 10px;
            margin-bottom: 15px;
        }

        .card-actions {
            margin-top: auto; /* 将按钮推到底部 */
            padding-top: 10px; /* 按钮上方留白 */
            display: flex;
            justify-content: space-between; /* 按钮均匀分布，两端对齐 */
            gap: 10px; /* 按钮间距 */
            border-top: 1px solid #eee; /* 按钮区上方细线 */
            padding-top: 15px;
        }

        .card-actions .btn {
            flex-grow: 1; /* 按钮自动填充可用空间 */
            padding: 10px 15px; /* 按钮内边距 */
            border-radius: 5px; /* 按钮圆角 */
            text-align: center;
            font-size: 0.95em;
            transition: background-color 0.2s ease, transform 0.1s ease;
        }

        .btn-info {
            background-color: #17a2b8; /* 查看详情按钮颜色 */
            color: white;
            border: none;
        }
        .btn-info:hover {
            background-color: #138496;
            transform: translateY(-2px);
        }

        .btn-success {
            background-color: #28a745; /* 加入购物车按钮颜色 */
            color: white;
            border: none;
        }
        .btn-success:hover {
            background-color: #218838;
            transform: translateY(-2px);
        }

        .btn-primary {
            background-color: #007bff; /* 立即购买按钮颜色 */
            color: white;
            border: none;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
        }

        /* 图片加载失败占位符的样式 */
        .course-image.placeholder {
            background-color: #f8f8f8;
            color: #b0b0b0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1em;
            text-align: center;
            height: 180px; /* 保持与图片相同高度 */
            border-radius: 10px 10px 0 0;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .container {
                width: 95%; /* 小屏幕下容器宽度略大 */
            }
            .page-title {
                font-size: 2em; /* 减小标题字体大小 */
            }
            .course-grid {
                grid-template-columns: 1fr; /* 小屏幕下堆叠显示 */
            }
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="container">
    <div class="page-header">
        <h1 class="page-title">所有可选课程</h1>
    </div>

    <div class="course-grid">
        <div class="course-card" th:each="course : ${availableCourses}">
            <img th:if="${course.couPic != null and !course.couPic.isEmpty()}"
                 th:src="@{|/images/${course.couPic}|}"
                 alt="课程封面"
                 class="course-image"
                 onerror="this.onerror=null;this.src='/images/default-course.jpg';"> <img th:unless="${course.couPic != null and !course.couPic.isEmpty()}"
                                                                                          th:src="@{/images/default-course.jpg}"
                                                                                          alt="无封面"
                                                                                          class="course-image">

            <div class="course-card-content">
                <h3 th:text="${course.couName}">课程名称占位符</h3>
                <p th:text="${course.couIntroduction}">课程介绍占位符。</p>
                <p class="instructor-info">讲师：<span th:text="${course.teaId != null ? '讲师ID: ' + course.teaId : '未知讲师'}">讲师姓名占位符</span></p>
                <p class="chapter-count">章节数：<span th:text="${course.couCataNum}">章节数占位符</span></p>
                <p class="price">价格: <span th:text="${course.couPrice != null ? course.couPrice + ' 积分' : '免费'}">价格占位符</span></p>
                <div class="card-actions">
                    <a th:href="@{/course/detail/{id}(id=${course.id})}" class="btn btn-info btn-sm">查看详情</a>

                    <form th:action="@{/student/cart/add/{courseId}(courseId=${course.id})}" method="post" style="display: inline;">
                        <button type="submit" class="btn btn-success btn-sm">加入购物车</button>
                    </form>

                    <form th:action="@{/student/purchase/{courseId}(courseId=${course.id})}" method="post" style="display: inline;">
                        <button type="submit" class="btn btn-primary btn-sm" onclick="return confirm('确定要购买这门课程吗？这将从您的积分中扣除相应费用。');">立即购买</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

</body>
</html>